<template>
  <div class="view-container">
    <div class="filter-container">
      <el-form
        :inline="true"
        :model="filterData"
        label-position="right"
        size="small"
        class="filter-form-inline"
      >
        <el-row
          :gutter="40"
          style="margin-left: 0px; margin-right: 0px"
        >
          <el-col
            :lg="6"
            :xs="5"
            style="max-width:25%"
          >
            <el-form-item
              label="状态"
              style="width: 100%"
            >
              <el-select
                v-model="filterData.disApplyStatus"
                clearable
                style="width: 100%"
                placeholder="全部"
                @change="refreshList"
              >
                <el-option
                  label="全部"
                  :value="''"
                />
                <el-option
                  v-for="(item,index) in dictMap.apply_distributor_status"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col
            :lg="6"
            :xs="5"
            style="max-width:25%"
          >
            <el-form-item
              label="产品名称"
              style="width: 100%"
            >
              <el-select
                v-model="filterData.productId"
                style="width: 100%;"
                clearable
                filterable
                remote
                reserve-keyword
                :remote-method="proRemoteMethod"
                :loading="proLoading"
                value-key="id"
                placeholder="请选择产品"
                @change="refreshList"
              >
                <el-option
                  v-for="item in productOptions"
                  :key="item.id"
                  :label="getProductName(item)"
                  :value="item.id"
                >
                  <div class="pro-item">
                    <span>{{ getProductName(item) }}</span>
                  </div>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col
            :lg="6"
            :xs="5"
            style="max-width:25%"
          >
            <el-form-item
              label="配送商"
              style="width: 100%"
            >
              <el-input
                v-model="filterData.distributeName"
                clearable
                placeholder="输入配送商名称"
                @clear="refreshList"
              />
            </el-form-item>
          </el-col>
          <el-col
            :span="4"
            style="min-width: 170px;"
          >
            <el-form-item style="width: 100%">
              <el-button
                class="border-btn"
                @click="resetFilter"
              >重置</el-button>
              <el-button
                type="primary"
                class="main-btn"
                @click="refreshList"
              >搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div
      class="main-content"
      style="padding-top: 0px;"
    >
      <div class="list-container">
        <table-tools>
          <template #left>
            <el-button
              v-auth="{v: ['crm:distributor:applyDistributor:create']}"
              class="main-btn"
              size="small"
              type="primary"
              @click="create"
            >申请配送商</el-button>
          </template>
        </table-tools>
        <table-view
          header-cell-class-name="table-header"
          :data="listData"
          border
          :cell-style="cellStyle"
          :visible="isMore"
          @row-click="rowClick"
        >
          <el-table-column
            prop="distributeApplyNo"
            label="申请编号"
            fixed="left"
            :width="140"
            show-overflow-tooltip
            header-align="center"
            align="center"
          />
          <el-table-column
            prop="distributeName"
            label="配送商名称"
            fixed="left"
            header-align="center"
            :min-width="200"
            show-overflow-tooltip
          />
          <el-table-column
            :min-width="150"
            show-overflow-tooltip
            prop="creatorName"
            label="配送产品"
            align="center"
            header-align="center"
          >
            <template #default="scope">
              <span> {{ getProductName(scope.row) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            :min-width="150"
            show-overflow-tooltip
            prop="creatorName"
            label="配送地区"
            header-align="center"
          >
            <template #default="scope">
              <area-list-view :areas="scope.row.region" />
            </template>
          </el-table-column>
          <el-table-column
            :min-width="160"
            show-overflow-tooltip
            label="企业所在地区"
            header-align="center"
          >
            <template #default="scope">
              <span v-if="scope.row.provinceName">{{ scope.row.provinceName }}</span>
              <span v-if="scope.row.cityName"> / {{ scope.row.cityName }}</span>
              <span v-if="scope.row.areaName"> / {{ scope.row.areaName }}</span>
            </template>
          </el-table-column>
          <el-table-column
            :min-width="160"
            show-overflow-tooltip
            label="详细地址"
            header-align="center"
          >
            <template #default="scope">
              <span>{{ scope.row.address || '无' }}</span>
            </template>
          </el-table-column>
          <el-table-column
            :width="130"
            show-overflow-tooltip
            prop="creatorName"
            label="创建人"
            align="center"
            header-align="center"
          >
            <template #default="scope">
              <span> {{ scope.row.creatorName||'无' }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="createdAt"
            label="创建时间"
            :width="150"
            show-overflow-tooltip
            header-align="center"
            align="center"
            sortable
          >
            <template #default="scope">
              <span> {{ dateFormat('yyyy-mm-dd HH:MM', scope.row.createdAt) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="状态"
            :min-width="120"
            show-overflow-tooltip
            header-align="center"
            align="center"
            fixed="right"
          >
            <template #default="scope">
              <div
                class="status-container"
                style="line-height: 20px;"
              >
                <div class="status">{{ getLabel('apply_distributor_status',scope.row.disApplyStatus) }}</div>
                <div v-if="scope.row.disApplyStatus==='2'">
                  <div
                    v-if="scope.row.isDistributeServer"
                    class="flow-status-color"
                  >[ 无配送服务 ]</div>
                  <div
                    v-if="scope.row.isDistributeTerminal"
                    class="flow-status-color"
                  >[ 无配送终端 ]</div>
                  <div
                    v-if="scope.row.isChange"
                    class="flow-status-color"
                  >[ 变更审核中 ]</div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            fixed="right"
            header-align="center"
            :min-width="100"
          >
            <template #default="scope">
              <el-button
                v-auth="{v: ['crm:distributor:applyDistributor:complete'], bool: scope.row.disApplyStatus==='0'}"
                type="text"
                @click="completeDeal(scope.row)"
              >完成处理</el-button>
            </template>
          </el-table-column>
        </table-view>
        <Pagination
          v-model:page="filterData.page"
          v-model:limit="filterData.pageSize"
          style="display: flex; justify-content: flex-end"
          :total="total"
          @pagination="getList"
        />
      </div>

    </div>
    <create-distributor
      ref="distributorDialog"
      @refresh="refreshList"
    />
    <deal-apply
      ref="dealApplyDialog"
      @refresh="refreshList"
    />
  </div>
</template>

<script>
import {defineAsyncComponent, defineComponent, getCurrentInstance, inject, onMounted, reactive, ref, toRefs,} from 'vue'
import {useRouter} from 'vue-router'
import {crmStore} from '@CRM/store'
import area from '@/utils/area.js'

export default defineComponent({
  components: {
    createDistributor: defineAsyncComponent(() =>
      import('../modules/createDistributor.vue')
    ),
    dealApply: defineAsyncComponent(() => import('../modules/dealApply.vue')),
  },
  setup() {
    const api = inject('api')
    const router = useRouter()
    const currentInstance = getCurrentInstance()
    var total = ref(0)
    var reactiveData = reactive({
      distributorDialog: null,
      dealApplyDialog: null,
      dictMap: crmStore.getters['dictionary/getDictionary'],
      citys: area,
      filterData: {
        disApplyStatus: '',
        productId: null,
        distributeName: '',
        page: 1,
        pageSize: 20,
      },
      listData: [],
      proLoading: false,
      productOptions: [],
    })
    const cellStyle = (row) => {
      if (row.column.label === '操作') return
      return 'cursor: pointer;'
    }
    const rowClick = (row, column, event) => {
      console.log(row, column, column.label, event)
      if (column.label === '操作') return
      router.push({
        name: 'applyDistributorsDetail',
        query: {
          id: row.id,
        },
      })
    }
    const proRemoteMethod = async(query) => {
      if (query !== '') {
        reactiveData.proLoading = true
        var pro = await api.common.GET_PRODUCT_LIST({ keyWord: query })
        if (pro.code === 0) {
          reactiveData.productOptions = pro.data.list
        } else {
          reactiveData.productOptions = []
        }
        reactiveData.proLoading = false
      } else {
        reactiveData.productOptions = []
      }
    }
    const create = () => {
      reactiveData.distributorDialog.open()
    }
    const completeDeal = (row) => {
      reactiveData.dealApplyDialog.open(row)
    }
    const getList = (row) => {
      console.log('列表')
      api.distributors
        .DISTRIBUTORS_APPLAY_LIST(reactiveData.filterData)
        .then((res) => {
          if (res.code === 0) {
            reactiveData.listData = res.data.list
            total.value = res.data.total
          }
        })
    }
    const resetFilter = () => {
      reactiveData.filterData = {
        disApplyStatus: '',
        distributeName: '',
        productId: null,
      }
      getList()
    }

    // 更新列表
    const refreshList = () => {
      getList()
    }

    onMounted(() => {
      getList()
    })

    return {
      total,
      ...toRefs(reactiveData),
      cellStyle,
      rowClick,
      getList,
      create,
      refreshList,
      resetFilter,
      completeDeal,
      proRemoteMethod,
    }
  },
})
</script>

